<template>
<div class="wrapper">
  <div class="card">
    <img class="card-img border" :src="basUrl+user.cardCover" alt="">
    <router-link  to="/user">
      <img class="profile" :src="user.userCover" alt="">
    </router-link>
    <div class="user">
        <span class="name">{{user.userName}}</span>
        <span class="Integral">积分 <span class="num">4</span></span>
        <div class="signature">{{user.userSign}}</div>
    </div>
    <div class="logo">
      <img class="logo-img" src="" alt="">
    </div>
    
  </div>
</div>

</template>

<script>

export default {
  name: 'MemberCard',
  props: {
    user: Object
  },
  data () {
    return {
      basUrl: 'https://qccxweb.nbwhlt.com/img/'
    }
  }

}
</script>

<style  lang="scss" scoped>
.wrapper{
    padding: 0 0.32rem;
    background-color: #fff;
}
.card{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 35%;
    border-radius: 0.32rem;
    .card-img{
        width: 100%;
    }
    .profile{
        position: absolute;
        top:18%;
        left: 0.16rem;
        width: 0.88rem;
        height: 0.88rem;
        border-radius: 50%;
        border: 1px solid #fff;
    }
    .user{
        position: absolute;
        left: 0.16rem;
        bottom: 0.16rem;
        font-size: 0.24rem;
        color:#fff;
        .name{
            display: inline-block;
            width: 0.88rem;
            height: 0.36rem;
            line-height: 0.36rem;
            text-align: center;
            font-size: 0.32rem;
            margin-right: 00.32rem;
        }
        .Integral{
            display: inline-block;
            width: 1.32rem;
            height: 0.32rem;
            line-height: 0.32rem;
            text-align: center;
            background-color: orange;
            border-radius: 0.08rem;
            .num{
                margin-left: 0.12rem;
            }
        }
        .signature{
            margin-top: 0.16rem;
            color: rgba(255,255,255,.8);
        }
    }
    .logo{
      position: absolute;
      top:0.16rem;
      right: 0.16rem;
      width: 1.5rem;
      height: 0.88rem;
      background-color: #fff;
    }
}
</style>
